{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游资讯 - 用户游记分享</title>
    <!-- 引入 Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #48dbfb;
            --accent-color: #1dd1a1;
            --dark-color: #2f3640;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f6fa;
            color: #333;
        }

        /* 导航条 - 保持与首页一致 */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 0;
        }

        /* 页面标题区 */
        .page-header {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{% static "img/travel-bg.jpg" %}');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
            margin-bottom: 50px;
        }

        .page-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .page-subtitle {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
        }

        /* 游记筛选区 */
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .filter-title {
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-color);
        }

        /* 游记卡片 */
        .travel-article {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
            transition: all 0.3s;
        }

        .travel-article:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        }

        .article-image {
            height: 250px;
            object-fit: cover;
            width: 100%;
        }

        .article-body {
            padding: 25px;
        }

        .article-meta {
            display: flex;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: #7f8c8d;
        }

        .article-author {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .author-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .article-date {
            display: flex;
            align-items: center;
        }

        .article-date i, .article-author i {
            margin-right: 5px;
            color: var(--primary-color);
        }

        .article-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--dark-color);
        }

        .article-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s;
        }

        .article-title a:hover {
            color: var(--primary-color);
        }

        .article-excerpt {
            color: #555;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        .article-tags span {
            display: inline-block;
            background: #f1f2f6;
            color: #7f8c8d;
            padding: 3px 10px;
            border-radius: 50px;
            font-size: 0.8rem;
            margin-right: 5px;
        }

        .article-stats {
            display: flex;
        }

        .stat-item {
            margin-left: 15px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .stat-item i {
            margin-right: 5px;
        }

        /* 热门游记作者 */
        .popular-authors {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark-color);
            position: relative;
            padding-bottom: 10px;
        }

        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        }

        .author-card {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .author-card:last-child {
            border-bottom: none;
        }

        .author-avatar-lg {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

        .author-info h5 {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .author-stats {
            font-size: 0.8rem;
            color: #7f8c8d;
        }

        /* 分页 */
        .pagination-custom .page-item.active .page-link {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            border-color: transparent;
        }

        .pagination-custom .page-link {
            color: var(--dark-color);
            border-radius: 5px;
            margin: 0 5px;
            border: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .page-header {
                padding: 60px 0;
            }

            .page-title {
                font-size: 2rem;
            }

            .article-image {
                height: 200px;
            }
        }
    </style>
</head>
<body>
<!-- 导航条（与首页一致） -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa fa-map-marked-alt"></i> 旅游推荐系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/homepage/"><i class="fa fa-home"></i> 首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom active" href="/travel/article/homepage/"><i
                            class="fa fa-newspaper"></i> 旅游资讯</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarDropdown1" role="button"
                       data-bs-toggle="dropdown">
                        <i class="fa fa-compass"></i> 目的地推荐
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                        <li><a class="dropdown-item" href="#">国内热门</a></li>
                        <li><a class="dropdown-item" href="#">国外精选</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">季节限定</a></li>
                        <li><a class="dropdown-item" href="#">主题旅游</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/add/{{ user.id }}/travel/article/"><i
                            class="fa fa-pen-fancy"></i> 写游记</a>
                </li>
            </ul>
            <div class="d-flex">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索游记...">
                    <button class="btn btn-light" type="button"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 页面标题区 -->
<div class="page-header">
    <div class="container">
        <h1 class="page-title">旅游资讯与游记分享</h1>
        <p class="page-subtitle">探索真实用户的旅行故事，获取第一手旅游体验和实用建议，为您的下一次旅行找到灵感</p>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 主内容区 -->
        <div class="col-lg-8">
            <!-- 筛选区 -->
            <div class="filter-section">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="filter-title"><i class="fa fa-filter"></i> 筛选游记</h5>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="#" class="btn btn-sm btn-outline-primary me-2"><i class="fa fa-fire"></i> 热门</a>
                        <a href="#" class="btn btn-sm btn-outline-primary me-2"><i class="fa fa-clock"></i> 最新</a>
                        <a href="#" class="btn btn-sm btn-outline-primary"><i class="fa fa-star"></i> 精华</a>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-3 mb-2">
                        <select class="form-select form-select-sm">
                            <option selected>全部目的地</option>
                            <option>国内</option>
                            <option>亚洲</option>
                            <option>欧洲</option>
                            <option>美洲</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-2">
                        <select class="form-select form-select-sm">
                            <option selected>全部类型</option>
                            <option>自由行</option>
                            <option>跟团游</option>
                            <option>自驾游</option>
                            <option>背包客</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-2">
                        <select class="form-select form-select-sm">
                            <option selected>全部季节</option>
                            <option>春季</option>
                            <option>夏季</option>
                            <option>秋季</option>
                            <option>冬季</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-2">
                        <select class="form-select form-select-sm">
                            <option selected>排序方式</option>
                            <option>按热度</option>
                            <option>按时间</option>
                            <option>按评论数</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 游记列表 -->
            {% for article in articles %}
                <div class="travel-article" style="cursor: pointer;"
                     onclick="window.location.href='{% url 'travel_article_detail' article.id %}'">
                    <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/article/{{ article.title }}/cover/cover.jpg"
                         class="article-image" alt="{{ article.title }}">
                    <div class="article-body">
                        <div class="article-meta">
                            <div class="article-author">
                                <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/avatar/avatar.jpg?v={{ user.avatar_timestamp }}"
                                     class="author-avatar"
                                     alt="作者头像">
                                <span>{{ article.author.nickname }}</span>
                            </div>
                            <div class="article-date">
                                <i class="fa fa-calendar"></i> {{ article.created_at|date:"Y-m-d" }}
                            </div>
                        </div>
                        <h3 class="article-title">
                            <a href="{% url 'travel_article_detail' article.id %}">{{ article.title }}</a>
                        </h3>
                        <p class="article-excerpt">{{ article.introduction|truncatewords:30 }}</p>
                        <div class="article-footer">
                            <div class="article-tags">
                                {% for tag in article.tags.all %}
                                    <span>{{ tag.name }}</span>
                                {% endfor %}
                            </div>
                            <div class="article-stats">
                                <div class="stat-item"><i class="fa fa-eye"></i> {{ article.view_count }}</div>
                                <div class="stat-item"><i class="fa fa-comment"></i> {{ article.comment_count }}</div>
                                <div class="stat-item"><i class="fa fa-heart"></i> {{ article.like_count }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}



            <!-- 分页 -->
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination pagination-custom justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 热门作者 -->
            <div class="popular-authors">
                <h3 class="section-title"><i class="fa fa-crown"></i> 热门游记作者</h3>
                <div class="author-card">
                    <img src="{% static 'img/avatar1.jpg' %}" class="author-avatar-lg" alt="作者头像">
                    <div class="author-info">
                        <h5>旅行家小王</h5>
                        <div class="author-stats">
                            <span><i class="fa fa-pen"></i> 28篇游记</span>
                            <span class="ms-2"><i class="fa fa-heart"></i> 5.6k喜欢</span>
                        </div>
                    </div>
                </div>
                <div class="author-card">
                    <img src="{% static 'img/avatar2.jpg' %}" class="author-avatar-lg" alt="作者头像">
                    <div class="author-info">
                        <h5>樱花小姐</h5>
                        <div class="author-stats">
                            <span><i class="fa fa-pen"></i> 15篇游记</span>
                            <span class="ms-2"><i class="fa fa-heart"></i> 3.2k喜欢</span>
                        </div>
                    </div>
                </div>
                <div class="author-card">
                    <img src="{% static 'img/avatar3.jpg' %}" class="author-avatar-lg" alt="作者头像">
                    <div class="author-info">
                        <h5>背包客老李</h5>
                        <div class="author-stats">
                            <span><i class="fa fa-pen"></i> 42篇游记</span>
                            <span class="ms-2"><i class="fa fa-heart"></i> 8.9k喜欢</span>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-3">
                    <a href="#" class="btn btn-sm btn-outline-primary">查看全部作者 <i
                            class="fa fa-angle-right"></i></a>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="popular-authors mt-4">
                <h3 class="section-title"><i class="fa fa-tags"></i> 热门标签</h3>
                <div class="tag-cloud">
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 自由行</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 自驾游</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 美食之旅</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 亲子游</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 蜜月旅行</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 穷游</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 摄影之旅</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 徒步</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 冬季旅游</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 海岛度假</a>
                </div>
            </div>

            <!-- 近期评论 -->
            <div class="popular-authors mt-4">
                <h3 class="section-title"><i class="fa fa-comments"></i> 近期评论</h3>
                <div class="comment-item mb-3">
                    <div class="d-flex">
                        <img src="{% static 'img/avatar4.jpg' %}" class="author-avatar" alt="用户头像">
                        <div class="ms-2">
                            <strong>旅行达人</strong>
                            <p class="mb-0 small">这篇西藏游记太实用了，正准备7月去，收藏了！</p>
                            <span class="text-muted small">2天前 · <a href="#"
                                                                      class="text-muted">西藏自驾游记</a></span>
                        </div>
                    </div>
                </div>
                <div class="comment-item mb-3">
                    <div class="d-flex">
                        <img src="{% static 'img/avatar5.jpg' %}" class="author-avatar" alt="用户头像">
                        <div class="ms-2">
                            <strong>美食探索者</strong>
                            <p class="mb-0 small">大阪的那家章鱼烧确实很棒，我去过三次！</p>
                            <span class="text-muted small">3天前 · <a href="#"
                                                                      class="text-muted">日本关西游记</a></span>
                        </div>
                    </div>
                </div>
                <div class="comment-item">
                    <div class="d-flex">
                        <i class="fa fa-user-circle author-avatar"></i>
                        <div class="ms-2">
                            <strong>新手上路</strong>
                            <p class="mb-0 small">求问楼主，云南那些秘境安全吗？女生一个人去...</p>
                            <span class="text-muted small">5天前 · <a href="#"
                                                                      class="text-muted">云南秘境游记</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 卡片悬停效果
    document.querySelectorAll('.travel-article').forEach(article => {
        article.addEventListener('mouseenter', function () {
            this.style.transform = 'translateY(-5px)';
            this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';
        });
        article.addEventListener('mouseleave', function () {
            this.style.transform = '';
            this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.08)';
        });
    });

    // 标签悬停效果
    document.querySelectorAll('.tag-cloud a').forEach(tag => {
        tag.addEventListener('mouseenter', function () {
            this.style.backgroundColor = '#f8f9fa';
        });
        tag.addEventListener('mouseleave', function () {
            this.style.backgroundColor = '';
        });
    });
</script>
</body>
</html>